<template>
    <div class="content">
        <el-input placeholder="请输入用户名" icon="search" v-model="userName" :on-icon-click="searchUser" @blur="searchAllUser"autofocus>
        </el-input>
        <div class="allUser">
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="userId"
                    label="用户ID"
                    width="130px">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="用户名"
                    width="130px">
            </el-table-column>
            <el-table-column
                    prop="storeBooks"
                    label="收藏的小说"
                    width="200px">
            </el-table-column>
            <el-table-column
                    prop="Violations"
                    label="违规次数"
                    width="200px">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="450">
                <template scope="scope">
                    <el-button @click="banOneweek(scope.row)" type="text" size="small">禁评一周</el-button>
                    <el-button @click="banOnemouth(scope.row)" type="text" size="small">禁评一个月</el-button>
                    <el-button @click="banforever(scope.row)" type="text" size="small">永久禁评</el-button>
                    <el-button @click="deleteUser(scope.row)" type="text" size="small">删除该用户</el-button>
                    <router-link to="/app/checkViolations"><el-button @click="checkMore(scope.row)" type="text" size="small">查看违规详情</el-button></router-link>
                </template>
            </el-table-column>
        </el-table>
        </div>
        <div>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="13"
                    layout="prev, pager, next"
                    :total="count">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {MessageBox} from 'element-ui';
    import {vm,key2} from './commonComponents/connect.vue';
    export default {
        data:function(){
            return {
                tableData: [],
                userName:'',
                count:''
            }
        },
        methods:{
//            handleSizeChange(val) {
//                console.log(`每页 ${val} 条`);
//            },
            handleCurrentChange(val) {
                this.$http.get(`http://localhost/api/getUsersInfo/${val}`).then(function (result) {
                    if(`${val}` ==1){
                        this.tableData = result.body.slice(0,13);
                    }
                    else{
                        this.tableData = result.body;
                    }
//                    this.tableData = result.body;
                })
            },
            //获取用户信息
            getUsersInfo:function(){
                this.$http.get('http://localhost/api/getUsersInfo/1').then(function(result){
                    this.tableData = result.body.slice(0,13);
                    this.count = result.body.length;
                })
            },
            //搜索用户
            searchUser:function () {
                this.$http.post('http://localhost/api/searchUser',{userName:this.userName},{emulateJSON:true}).then(function (result) {
                    this.tableData = result.body;
                })
            },
            //但输入框里的文字为空的时候显示所有的用户
            searchAllUser:function () {
                this.getUsersInfo();
            },
            //删除该用户
            deleteUser:function (row) {
                var _this = this;
                MessageBox({
                    title: '提示',
                    message: '此操作将永久删除该用户, 是否继续?',
                    type: 'warning',
                    showCancelButton: true,
                    callback: function (action, instance) {
                        if (action == "confirm") {
                            _this.$http.post('http://localhost/api/deleteUser', {userId: row.userId}, {emulateJSON: true}).then(function (result) {
                                instance.$message({
                                    type: 'success',
                                    message: result.body.message
                                });
                            });
                            _this.getUsersInfo();
                        } else {
                            instance.$message({
                                type: 'info',
                                message: "取消删除"
                            })
                        }
                    }
                });
            },
            //查看违规记录
            checkMore:function (row) {
                this.$store.commit('sendToViolations',{
                    userId:row.userId
                })
            }
        },
        created:function(){
            this.getUsersInfo();
        }
    }
</script>
<style scoped>
    .content{
        padding:20px 40px 0 20px;
    }
    .allUser{
        height: 600px;
        margin-bottom: 10px;
    }
</style>